<template>
  <div class="person">
    <el-dialog
      width="900px"
      center
      :before-close="closeDialog"
      title="加入人员"
      :close-on-click-modal="false"
      :visible.sync="addDialogFormVisible"
    >
      <div>
        <el-form :inline="true" :model="dataForm" ref="dataForm" class="elformcss">
          <el-form-item label="部门" prop="departmentGuidList">
            <el-select
              v-model="departmentGuidList"
              placeholder="请选择"
              size="mini"
              clearable
              style="width: 100%"
              multiple
              filterable
            >
              <el-option
                v-for="item in departmentGuidListOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分组" prop="groupGuid">
            <el-select
              v-model="dataForm.groupGuid"
              placeholder="请选择"
              size="mini"
              clearable
              style="width:140px"
            >
              <el-option
                v-for="item in groupGuidOption"
                :key="item.groupGuid"
                :label="item.groupName"
                :value="item.groupGuid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="username">
            <el-input v-model="dataForm.username" size="mini" clearable style="width:120px"></el-input>
          </el-form-item>
          <el-form-item label="卡号" prop="carnumber">
            <el-input v-model="dataForm.carnumber" size="mini" clearable style="width:120px"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="carnumber">
            <el-radio v-model="dataForm.sex" :label="''">全部</el-radio>
            <el-radio v-model="dataForm.sex" :label="0">男</el-radio>
            <el-radio v-model="dataForm.sex" :label="1">女</el-radio>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchifo" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          ref="multipleTable"
          :data="changestudentlist"
          tooltip-effect="dark"
          style="width: 100%"
          :stripe="true"
          border
          :header-cell-style="headFirst"
          @selection-change="handleSelectionChange"
          :cell-style="(res) => headFirst_col(res, [])"
          height="calc(100vh - 15vh - 260px)"
          v-loading="loading"
        >
          <!-- <el-table-column type="selection" width="45" align="center"></el-table-column> -->
          <el-table-column label="是否选中" prop="isCheck" align="center" width="45">
            <template slot="header" slot-scope="scope">
              <el-checkbox :value="isSelectAll" @change="CheckSelectAll" />
            </template>
            <template slot-scope="scope">
              <el-checkbox
                :value="scope.row.isCheck"
                @change="(isCheck) => CheckSelect(isCheck, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
          <!-- <el-table-column prop="userNumber" label="编号" align="center"></el-table-column> -->
          <el-table-column prop="cardNumber" label="卡号" align="center"></el-table-column>
          <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
          <el-table-column prop="userSex" label="性别" align="center">
            <template slot-scope="scope">{{scope.row.userSex | userSexType}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChangeY"
          @current-change="handleCurrentChangepageY"
          :current-page="pageY"
          :page-sizes="[20, 40, 80, 120]"
          :page-size="pageSizeY"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalY"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog ()">取消</el-button>
        <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 数据
      changestudentlist: [],
      // 是否全选
      isSelectAll: false,
      // 表格中拿出的原始数据
      changestudentY: [],
      // 原始页数
      pageY: 1,
      // 每条个数
      pageSizeY: 20,
      // 总条数
      totalY: 0,

      addDialogFormVisible: false,
      dataForm: {
        username: '',
        carnumber: '',
        groupGuid: '',
        sex: ''
      },
      // 部门
      departmentGuidList: [],
      departmentGuidListOption: [],
      // 分组
      groupGuidOption: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      selectarr: [],
      /**过滤条件 */
      personUrl: '',
      identifyObj: {}
    }
  },
  props: [],
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  filters: {
    userSexType(val) {
      if (val == 0) {
        return '男'
      } else if (val == 1) {
        return '女'
      }
    }
  },
  mounted() {},
  methods: {
    //获取分组列表
    getGroup() {
      this.$http({
        url: this.$http.adornUrl('/unit/unit-user-group-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.groupGuidOption = data.messageContent || []
        }
      })
    },

    // 获取部门信息
    getDeptTree() {
      this.departmentGuidListOption = [];
      this.$http({
        url: this.$http.adornUrl('/department/query-department-info'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].departmentGuid,
              label: Arr[i].departmentName
            }
            this.departmentGuidListOption.push(itemobj)
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 关闭窗口
    closeDialog(done) {
      this.addDialogFormVisible = false
      // done()
    },
    // 打开窗口
    addinit(personUrl, identifyObj) {
      this.departmentGuidList = []
      this.dataForm = {
        username: '',
        carnumber: '',
        groupGuid: '',
        sex: ''
      }
      // 获取数据
      this.getDeptTree()
      this.getGroup()
      this.personUrl = personUrl
      this.identifyObj = identifyObj
      // 查询人员
      this.searchifo()
      this.addDialogFormVisible = true
    },
    searchifo() {
      this.pageY = 1
      this.getdepartmentinfo()
    },
    // 提交按钮
    addataFormSubmit() {
      this.handleSelectionChange()
      if (this.selectarr.length < 1) {
        this.$message({
          message: '请选择人员',
          type: 'warning'
        })
        return
      }
      this.$refs['dataForm'].resetFields()
      this.$emit('refreshDataList', this.selectarr)
      this.addDialogFormVisible = false
    },
    //获取人员简要信息
    getdepartmentinfo() {
      this.searchInfo = {}
      this.searchInfo.unitGuid = this.changeschoolid
      this.searchInfo.departmentGuidList = this.departmentGuidList
      this.searchInfo.cardNumber = this.dataForm.carnumber
      this.searchInfo.userName = this.dataForm.username
      this.searchInfo.groupGuid = this.dataForm.groupGuid
      this.searchInfo.sex = this.dataForm.sex
      let key = Object.keys(this.identifyObj)[0]
      this.searchInfo[key] = this.identifyObj[key]
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(this.personUrl),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            ...this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading = false
        if (data.messageCode == 200) {
          let list = []
          let arrto = data.messageContent || []
          arrto.map((item, index) => {
            item.isCheck = this.isSelectAll
            item.id = index
            list.push(item)
          })
          this.changestudentY = list
          this.getUserList(this.pageY, this.pageSizeY)
          this.totalY = list.length
          if (this.changestudentY.length == 0) {
            this.$message({
              message: '查询成功，当前暂无可绑定的人员',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    /**
     * 自己分页
     */
    getUserList(pagenum, pagesize) {
      this.changestudentlist = this.changestudentY.slice(
        (pagenum - 1) * pagesize,
        pagenum * pagesize
      )
    },
    // 选中数据
    CheckSelect(val, row) {
      // 因为是用索引当做id的。
      this.changestudentY[row.id].isCheck = val
      console.log(this.changestudentY)
    },
    // 全选按钮
    CheckSelectAll(val) {
      this.isSelectAll = val
      this.changestudentY.map(item => {
        item.isCheck = val
      })
      console.log(this.changestudentY)
    },
    // 前端分页
    handleSizeChangeY(val) {
      this.pageSizeY = val
      this.getUserList(this.pageY, this.pageSizeY)
    },
    handleCurrentChangepageY(val) {
      this.pageY = val
      this.getUserList(this.pageY, this.pageSizeY)
    },

    // 选择导出数据处理
    getData() {
      let arr = []
      this.changestudentY.map(item => {
        if (item.isCheck) {
          arr.push(item)
        }
      })
      return arr
    },
    // 导出的人员Id
    handleSelectionChange() {
      this.selectarr = []
      this.changestudentY.map(item => {
        if (item.isCheck) {
          this.selectarr.push(item.userGuid)
        }
      })
      console.log(console.log(this.selectarr))
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 5px;
}
.person {
  //滚动条的宽度
  ::-webkit-scrollbar {
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .el-dialog__body .el-form.el-form--inline {
    width: 100%;
  }
  /deep/.el-dialog--center .el-dialog__body {
    padding: 0 20px;
  }
  .el-radio {
    margin-right: 20px;
  }
  .el-radio + .el-radio {
    margin-left: 0;
  }
  .el-form.el-form--inline {
    width: 100%;
    display: inline-block;
  }
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>